<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-04 17:34:56
 * @LastEditTime: 2021-12-06 09:27:22
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/member/pages/account/invite-code/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="id-qrcode page">
    <view class="coupon">
      <view class="coupon-code">
        <text class="your-code">您的邀请码</text>
        <text class="code-value">{{ info.inviteCode || '--' }}</text>
        <a-btn type="text" @tap="setClipboardData(info.inviteCode)">复制邀请码</a-btn>
        <text class="tips">好友也可在注册时直接填写邀请码</text>
      </view>
      <view class="coupon-split"></view>
      <view class="coupon-qrcode">
        <axq-invite-code-wx-entry
          :member-id="info.memberStatistics.memberId"
          :url="info.inviteCodeWxEntry"
        ></axq-invite-code-wx-entry>
        <view class="qrcode-btns">
          <a-btn @tap="saveImageToAlbum(info.inviteCodeWxEntry)">保存图片</a-btn>
          <button type="primary" open-type="share" class="share">分享</button>
        </view>
      </view>
    </view>
    <view class="tips">
      <text class="tips-txt">温馨提示：</text>
      <text class="tips-txt">身份识别码可用于店铺前台身份识别，或邀请好友！</text>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import axqInviteCodeWxEntry from '../../../components/invite-code-wx-entry';

export default {
  components: {
    axqInviteCodeWxEntry
  },
  data () {
    return {}
  },
  onShow () {
    this.$forceUpdate()
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      return {
        title: '傲雪棋会员注册分享',
        path: '/pages/index/index?redType=invite&inviteCode=' + this.info.inviteCode,
        success: function (res) {
          this.toast('分享成功')
        }
      }
    }
  },
  computed: {
    ...mapState('user', ['info'])
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.id-qrcode {
  padding: @box-gap;
  min-height: 100vh;
  background-color: @color-theme;
  box-sizing: border-box;

  .coupon {
    background: #fff;

    &-code {
      .flexLayout(@dir: column, @a: center, @j: space-around);
      padding: 35rpx 0 42rpx 0;
      height: 378rpx;
      box-sizing: border-box;

      .your-code {
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
      }

      .code-value {
        padding: 0 50rpx;
        height: 110rpx;
        background: #f5f5f5;
        line-height: 110rpx;
        font-size: 60rpx;
        font-weight: 800;
        text-align: center;
        color: #000;
      }

      /deep/ .axq-btn {
        font-size: 30rpx;
        font-weight: bold;
      }

      .tips {
        font-size: 30rpx;
        color: #999;
      }
    }

    &-split {
      position: relative;
      width: 100%;
      border-bottom: 2rpx dashed @color-theme;

      &::before {
        content: "";
        position: absolute;
        top: -25rpx;
        left: -25rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background: @color-theme;
      }

      &::after {
        content: "";
        position: absolute;
        top: -25rpx;
        right: -25rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background: @color-theme;
      }
    }

    &-qrcode {
      padding: 40rpx;
      .flexLayout(@dir: column, @a: center, @j: space-around);

      .qrcode-btns {
        .flexLayout(@a: center, @j: space-between);
        margin-top: 40rpx;
        width: 440rpx;

        /deep/ .axq-btn {
          width: 190rpx;
        }

        .share {
          margin-left: 60rpx;
          margin-bottom: 10rpx;
          width: 190rpx;
          height: 75rpx;
          text-align: center;
          color: #fff;
          font-size: 30rpx;
          border-radius: 20rpx;
          background-color: #db187c;

          &::after {
            border: transparent;
          }
        }
      }
    }
  }

  .tips {
    .flexLayout(@j: space-around);
    margin-top: 29rpx;

    &-txt {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff7fb;

      &:nth-of-type(1) {
        width: 7em;
      }

      &:nth-of-type(2) {
        padding-right: 70rpx;
      }
    }
  }
}
</style>